<template>
    <div class="register">
        <el-card shadow="hover" class="register_box">
            <template slot="header">
                用户注册
            </template>

            <el-form :model="registerForm">
                <el-form-item>
                    <el-input
                        v-model="registerForm.username"
                        placeholder="请输入用户名"
                    ></el-input>
                </el-form-item>

                <el-form-item>
                    <el-input
                        v-model="registerForm.password"
                        placeholder="请输入密码"
                        show-password
                    ></el-input>
                </el-form-item>

                <el-form-item>
                    <el-input
                        v-model="registerForm.nickname"
                        placeholder="请输入昵称"
                    ></el-input>
                </el-form-item>
            </el-form>

            <el-button type="success" @click="register">注册</el-button>
            <el-row type="flex" justify="end">
                <el-link @click.prevent="goLogin">已注册？去登录吧</el-link>
            </el-row>
        </el-card>
    </div>
</template>

<script>
export default {
    data() {
        return {
            registerForm: {
                username: "",
                password: "",
                nickname: "",
            },
        };
    },
    methods: {
        goLogin() {
            this.$router.push("/login");
        },
        async register() {
            const { username, password, nickname } = this.registerForm;
            if (!username || !password || !nickname) {
                this.$notify.error("请填写必要的注册信息");
                return;
            }
            const res = await this.$http.post("/register", this.registerForm);
            if (res.data.code !== 201) {
                this.$notify.error(res.data.message);
                return;
            }
            this.$router.push("/login");
        },
    },
};
</script>

<style lang="less" scoped>
.register {
    height: 100%;
    background-color: #eee;
    display: flex;
    justify-content: center;
    align-items: center;

    .register_box {
        width: 450px;

        .el-button {
            width: 100%;
        }

        .el-link {
            margin-top: 15px;
        }
    }
}
</style>
